<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>steps 步骤条、时间轴 | 樊小书生的博客</title>
    <meta name="keywords" content="樊小书生的博客,steps 步骤条、时间轴">
    <meta name="description" content="樊小书生的博客专注于web前端学习的分享">
    <link rel="stylesheet" href="http://www.fxss5201.cn/project/css/normalize.css">
    <link rel="stylesheet" href="http://www.fxss5201.cn/project/layui/css/layui.css">
    <link rel="stylesheet" href="http://www.fxss5201.cn/project/css/hybrid.css">
    <link rel="stylesheet" href="steps.css">
    <script src="../iconfont.js"></script>
    <style>
        html {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        body {
            font-family: "Helvetica Neue","Microsoft YaHei",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }
        .icon {
            width: 1em; height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        .head {
            text-align: center;
            line-height: 80px;
        }
        .h2-title {
            text-align: left;
            line-height: 38px;
            font-size: 1.1em;
            font-weight: 700;
        }
        .h3-title {
            line-height: 28px;
        }
        .margin-bottom-5 {
            margin-bottom: 5px;
        }
        .site-title {
            margin: 15px 0;
        }
        .paragraph {
            margin-bottom: 8px;
        }
        .padding-left-20 {
            padding-left: 20px;
        }
        
        body .custom-class .steps-vertical .step-line  {
            left: 19px;
        }
        body .custom-class .steps-horizontal .step-line  {
            top: 19px;
        }
        .step-icon-custom-box {
            width: 40px;
            height: 40px;
        }
        .step-icon-custom {
            margin-top: -2px;
            font-size: 26px;
        }
    </style>
    <script src="http://www.fxss5201.cn/project/js/highlight.pack.js"></script>
    <script src="steps.js"></script>
</head>
<body>
    <div class="layui-container">
        <h1 class="head">steps 步骤条、时间轴</h1>
        <hr>
        <h2 class="h2-title">1.介绍</h2>
        <p class="paragraph padding-left-20">steps.js是基于原生JavaScript的组件，可用于展示步骤条、时间轴等，功能支持：</p>
        <div class="padding-left-20">
            <p class="paragraph padding-left-20">1. 自适应</p>
            <p class="paragraph padding-left-20">2. 支持横向和纵向显示，并且横向还支持居中显示</p>
            <p class="paragraph padding-left-20">3. 支持自定义间距</p>
            <p class="paragraph padding-left-20">4. 线、标题、描述、自定义等可自由排序</p>
            <p class="paragraph padding-left-20">5. 支持数字和圆点及自定义图标，也可以使用图片</p>
            <p class="paragraph padding-left-20">6. 如果标题和详情还不足以满足您的需求，你还可以插入自定义的html代码</p>
            <p class="paragraph padding-left-20">7. 如果样式不满意，可以加入自定义的父类class，然后根据css的权重重新定义样式</p>
        </div>
        <h2 class="h2-title">2、资源</h2>
        <div class="paragraph padding-left-20">
            <h3 class="h3-title">（1）、首先需要引入样式文件steps.css：</h3>
            <pre class="margin-bottom-5"><code class="html">&lt;link rel="stylesheet" href="steps.css"&gt;</code></pre>
            <h3 class="h3-title">（2）、接下来引入steps.js：</h3>
            <pre class="margin-bottom-5"><code class="html">&lt;script src="steps.js"&gt;&lt;/script&gt;</code></pre>
        </div>
        <h2 class="h2-title">3、使用</h2>
        <div class="paragraph padding-left-20">
            <h3 class="h3-title">（1）、在使用的时候，需要一个容器，例如：</h3>
            <pre class="margin-bottom-5"><code class="html">&lt;div id="steps1"&gt;&lt;/div&gt;</code></pre>
            <h3 class="h3-title">（2）、然后在 JavaScript 中进行初始化：</h3>
            <pre class="margin-bottom-5"><code class="javascript">var steps1 = steps({
    el: "#steps1",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "desc步骤3步骤3" }
    ],
    active: 1,
    dataOrder: ["title", "line", "description"]
});</code></pre>
            <h3 class="h3-title">（3）、实际效果如下：</h3>
            <div id="steps1"></div>
            <script>
                var steps1 = steps({
                    el: "#steps1",
                    data: [
                        { title: "步骤1", description: "111" },
                        { title: "步骤2", description: "222" },
                        { title: "步骤3", description: "desc步骤3步骤3" }
                    ],
                    active: 1,
                    dataOrder: ["title", "line", "description"]
                });
            </script>
        </div>
        <h2 class="h2-title">4、参数</h2>
        <div class="paragraph padding-left-20">参数详情请直接查看README.md文件。</div>
        <h2 class="h2-title">5、例子</h2>
        <div class="paragraph padding-left-20">
            <h3 class="h3-title">（1）、space: 100px;设置间距</h3>
            <div class="paragraph padding-left-20">
                <div id="steps2"></div>
                <script>
                    var steps2 = steps({
                        el: "#steps2",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        space: 100
                    });
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps2"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps2 = steps({
    el: "#steps2",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    space: 100
});</code></pre>
            </div>

            <h3 class="h3-title">（2）、center: true;</h3>
            <div class="paragraph padding-left-20">
                <div id="steps3"></div>
                <script>
                    var steps3 = steps({
                        el: "#steps3",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        center: true
                    });
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps3"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps3 = steps({
    el: "#steps3",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    center: true
});</code></pre>
            </div>

            <h3 class="h3-title">（3）、direction: "vertical";在使用direction: "vertical"的时候，可以在父元素上指定填充的高度，如果未指定，则以内容填充。</h3>
            <h3 class="h3-title">未指定高度：</h3>
            <div class="paragraph padding-left-20">
                <div id="steps4"></div>
                <script>
                    var steps4 = steps({
                        el: "#steps4",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        direction: "vertical"
                    });
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps4"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps4 = steps({
    el: "#steps4",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    direction: "vertical"
});</code></pre>
            </div>
            <h3 class="h3-title">指定高度为：150px;</h3>
            <div class="paragraph padding-left-20">
                <div id="steps5" style="height: 150px;"></div>
                <script>
                    var steps5 = steps({
                        el: "#steps5",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        direction: "vertical",
                        active: 1
                    });
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps5" style="height: 150px;"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps5 = steps({
    el: "#steps5",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    direction: "vertical",
    active: 1
});</code></pre>
            </div>
            
            <h3 class="h3-title">（4）、active：1;设置当前活动项</h3>
            <div class="paragraph padding-left-20">
                <div id="steps6"></div>
                <script>
                    var steps6 = steps({
                        el: "#steps6",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        active: 1
                    });
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps6"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps6 = steps({
    el: "#steps6",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    active: 1
});</code></pre>
            </div>
            
            <h3 class="h3-title">（5）、finishLine：false;关闭线条颜色</h3>
            <div class="paragraph padding-left-20">
                <div id="steps7"></div>
                <script>
                    var steps7 = steps({
                        el: "#steps7",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        active: 1,
                        finishLine: false
                    });
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps7"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps7 = steps({
    el: "#steps7",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    active: 1,
    finishLine: false
});</code></pre>
            </div>
            
            <h3 class="h3-title">（6）、dataOrder：["title", "line", "description"];调整显示顺序</h3>
            <div class="paragraph padding-left-20">
                <div id="steps8"></div>
                <script>
                    var steps8 = steps({
                        el: "#steps8",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        dataOrder: ["title", "line", "description"]
                    });
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps8"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps8 = steps({
    el: "#steps8",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    dataOrder: ["title", "line", "description"]
});</code></pre>
            </div>
            <div class="paragraph padding-left-20">
                <div id="steps9" style="height: 150px"></div>
                <script>
                    var steps9 = steps({
                        el: "#steps9",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        direction: "vertical",
                        dataOrder: ["title", "line", "description"]
                    });
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps9" style="height: 150px"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps9 = steps({
    el: "#steps9",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    direction: "vertical",
    dataOrder: ["title", "line", "description"]
});</code></pre>
            </div>

            <h3 class="h3-title">（7）、dataWidth：["0 0 100px", "none", "auto"];此属性仅在direction="vertical"时有效，按照 dataOrder 的显示顺序设置每个的默认宽度</h3>
            <div class="paragraph padding-left-20">
                <div id="steps10" style="height: 150px"></div>
                <script>
                    var steps10 = steps({
                        el: "#steps10",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        direction: "vertical",
                        dataOrder: ["title", "line", "description"],
                        dataWidth: ["0 0 100px", "none", "auto"]
                    });
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps10" style="height: 150px"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps10 = steps({
    el: "#steps10",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    direction: "vertical",
    dataOrder: ["title", "line", "description"],
    dataWidth: ["0 0 100px", "none", "auto"]
});</code></pre>
            </div>

            <h3 class="h3-title">（8）、iconType："bullets";主轴线icon设置为圆点</h3>
            <div class="paragraph padding-left-20">
                <div id="steps11" style="height: 150px"></div>
                <script>
                    var steps11 = steps({
                        el: "#steps11",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333" }
                        ],
                        direction: "vertical",
                        dataOrder: ["title", "line", "description"],
                        dataWidth: ["0 0 100px", "none", "auto"],
                        iconType: "bullets"
                    });
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps11" style="height: 150px"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps11 = steps({
    el: "#steps11",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333" }
    ],
    direction: "vertical",
    dataOrder: ["title", "line", "description"],
    dataWidth: ["0 0 100px", "none", "auto"],
    iconType: "bullets"
});</code></pre>
            </div>

            <h3 class="h3-title">（9）、props：暂时由于extend对象合并函数不完善，所以需要将需要用到的参数全部重新设置，哪怕是默认值</h3>
            <div class="paragraph padding-left-20">
                <div id="steps12"></div>
                <script>
                    var steps12 = steps({
                        el: "#steps12",
                        data: [
                            { name: "步骤1", description: "111" },
                            { name: "步骤2", description: "222" },
                            { name: "步骤3", description: "333" }
                        ],
                        props: {
                            title: "name",
                            description: "description"
                        }
                    });
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps12"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps12 = steps({
    el: "#steps12",
    data: [
        { name: "步骤1", description: "111" },
        { name: "步骤2", description: "222" },
        { name: "步骤3", description: "333" }
    ],
    props: {
        title: "name",
        description: "description"
    }
});</code></pre>
            </div>

            <h3 class="h3-title">（10）、data.status 在data中设置每一个的完成状态，此时设置active无效</h3>
            <div class="paragraph padding-left-20">
                <div id="steps13"></div>
                <script>
                    var steps13 = steps({
                        el: "#steps13",
                        data: [
                            { title: "步骤1", description: "111", status: 1 },
                            { title: "步骤2", description: "222" },
                            { title: "步骤3", description: "333", status: 1 }
                        ],
                        center: true,
                        active: 1,
                        iconType: "bullets"
                    });
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps13"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps13 = steps({
    el: "#steps13",
    data: [
        { title: "步骤1", description: "111", status: 1 },
        { title: "步骤2", description: "222" },
        { title: "步骤3", description: "333", status: 1 }
    ],
    center: true,
    active: 1,
    iconType: "bullets"
});</code></pre>
            </div>

            <h3 class="h3-title">（11）、data.icon 主轴线的icon自定义，外层的iconType需要设置为"custom"，如果外层的iconType设置为"custom"，但是data没有传icon值的话依然以默认参数Number</h3>
            <div class="paragraph padding-left-20">
                <div id="steps14"></div>
                <script>
                    var steps14 = steps({
                        el: "#steps14",
                        data: [
                            { title: "步骤1", description: "111", icon: '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-wechat"></use></svg>' },
                            { title: "步骤2", description: "desc步骤2步骤2", icon: '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-alipay"></use></svg>' },
                            { title: "步骤3", description: "desc步骤3步骤3", icon: '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-QQ"></use></svg>' }
                        ],
                        active: 1,
                        iconType: "custom",
                        customClass: "custom-class"
                    });
                </script>
                <pre class="margin-bottom-5"><code class="style">body .custom-class .steps-vertical .step-line  {
    top: 19px;
}
.step-icon-custom-box {
    width: 40px;
    height: 40px;
}
.step-icon-custom {
    margin-top: -2px;
    font-size: 26px;
}</code></pre>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps14"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps14 = steps({
    el: "#steps14",
    data: [
        { title: "步骤1", description: "111", icon: '&lt;svg class="icon" aria-hidden="true"&gt;&lt;use xlink:href="#icon-wechat"&gt;&lt;/use&gt;&lt;/svg&gt;' },
        { title: "步骤2", description: "desc步骤2步骤2", icon: '&lt;svg class="icon" aria-hidden="true"&gt;&lt;use xlink:href="#icon-alipay"&gt;&lt;/use&gt;&lt;/svg&gt;' },
        { title: "步骤3", description: "desc步骤3步骤3", icon: '&lt;svg class="icon" aria-hidden="true"&gt;&lt;use xlink:href="#icon-QQ"&gt;&lt;/use&gt;&lt;/svg&gt;' }
    ],
    active: 1,
    iconType: "custom",
    customClass: "custom-class"
});</code></pre>
            </div>

            <h3 class="h3-title">（12）、data.customHtml 在data中设置每一个的自定义内容</h3>
            <div class="paragraph padding-left-20">
                <div id="steps15"></div>
                <script>
                    var steps15 = steps({
                        el: "#steps15",
                        data: [
                            { title: "步骤1", description: "111" },
                            { title: "步骤2", description: "desc步骤2步骤2", customHtml: '<div style="order: 3;">我是2的自定义内容</div>' },
                            { title: "步骤3", description: "desc步骤3步骤3" }
                        ],
                        active: 1
                    });
                </script>
                <pre class="margin-bottom-5"><code class="html">&lt;div id="steps15"&gt;&lt;/div&gt;</code></pre>
                <pre class="margin-bottom-5"><code class="javascript">var steps15 = steps({
    el: "#steps15",
    data: [
        { title: "步骤1", description: "111" },
        { title: "步骤2", description: "desc步骤2步骤2", customHtml: '&lt;div style="order: 3;"&gt;我是2的自定义内容&lt;/div&gt;' },
        { title: "步骤3", description: "desc步骤3步骤3" }
    ],
    active: 1
});</code></pre>
            </div>

        </div>
        <div style="margin: 20px 0 10px;">关于前端知识，你可以进入我的博客查看更多知识：
            <a target="_blank" href="http://www.fxss5201.cn/" style="color: #1e9fff">樊小书生的博客</a>。
        </div>
        <p class="copyright" style="margin-bottom: 50px;">
            Copyright © 2018
            <a href="http://www.fxss5201.cn/" target="_blank" title="樊小书生" style="color: #1e9fff">樊小书生</a>
            <a href="http://www.miitbeian.gov.cn">晋ICP备17012454号</a>
        </p>
    </div>
    <script>hljs.initHighlightingOnLoad();</script>
</body>
</html>